<template>
  <div class="formData">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="200px">
      <app-main-sub-title title="预约设置" />
      <!-- <el-form-item label="预约项统一称谓：" prop="appointmentItem">
        <el-input v-model="form.appointmentItem" placeholder="请输入预约项统一称谓" />
        <div class="tips">家政行业可填“服务”，教育行业可填“课程”，酒店行业可填“房型”，等等。</div>
      </el-form-item>

      <el-form-item label="人员类资源统一称谓：" prop="personnelItem">
        <el-input v-model="form.personnelItem" placeholder="请输入人员类资源统一称谓" />
        <div class="tips">家政行业可填“阿姨”，美发行业可填“手艺人”，等等。</div>
      </el-form-item> -->

      <el-form-item label="用户修改时间：" prop="isChangeTime">
        <div>
          <el-radio-group v-model="form.isChangeTime">
            <el-radio :label="false">不可以修改</el-radio>
            <el-radio :label="true">
              <div class="additional">
                可以修改时间
                <!-- <el-input-number
                  v-model="form.modificationTimes"
                  :disabled="!form.isChangeTime"
                  placeholder="请输入整数"
                  controls-position="right"
                  :min="0"
                >
                </el-input-number> -->
              </div>
            </el-radio>
          </el-radio-group>
        </div>
      </el-form-item>

      <el-form-item label="预约范围：" prop="reservationScope">
        <el-input-number
          v-model="form.reservationScope"
          placeholder="请输入1~7整数"
          :min="1"
          :max="7"
          controls-position="right"
        >
          <template slot="append">天</template>
        </el-input-number>
        <div class="tips">含当日在内，允许预约的最大天数。即每日放号时间N天内的号源。如今天为1月1日，设置为7天，即可预约1-7日的号。</div>
      </el-form-item>

      <el-form-item label="发起预约限制：" prop="isStartLimit">
        <div>
          <el-radio-group v-model="form.isStartLimit">
            <el-radio :label="false">不限制</el-radio>
            <el-radio :label="true">
              <div class="additional">
                需提前 &nbsp;
                <el-tooltip effect="dark" :content="isStartLimitTooltip" placement="top">
                  <el-input-number
                    v-model="form.initiateReservationRestrictions"
                    :disabled="!form.isStartLimit"
                    placeholder="请输入"
                    controls-position="right"
                    :min="1"
                    :max="initiatorMax"
                  />
                </el-tooltip>
                <el-select v-model="form.initiateReservationUnit" :disabled="!form.isStartLimit" placeholder="请选择">
                  <el-option v-for="item in limitOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-radio>
          </el-radio-group>
        </div>
        <div class="tips">若设置需提前1小时，当前时间为9点，则只能预约10点后的。</div>
      </el-form-item>

      <el-form-item label="取消预约限制：" prop="isCancelLimit">
        <div>
          <el-radio-group v-model="form.isCancelLimit">
            <el-radio :label="false">不限制</el-radio>
            <el-radio :label="true">
              <div class="additional">
                需提前
                <el-tooltip effect="dark" :content="isCancelLimitTooltip" placement="top">
                  <el-input-number
                    v-model="form.cancelReservationRestrictions"
                    :disabled="!form.isCancelLimit"
                    placeholder="请输入"
                    controls-position="right"
                    :min="1"
                    :max="cancelMax"
                  />
                </el-tooltip>
                <el-select v-model="form.cancelReservationUnit" :disabled="!form.isCancelLimit" placeholder="请选择">
                  <el-option v-for="item in limitOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-radio>
          </el-radio-group>
        </div>
        <div class="tips">
          在取消预约限制时间前方可取消，如设置1小时前，预约时间为2022-05-18
          11:00，则需要在2022-05-18
          10:00前方可取消，之后则不可以取消，也不可以申请退款哦~
        </div>
      </el-form-item>

      <el-form-item label="提醒消费者：" prop="remindTime">
        <div>
          预约时间将达到前
          <el-tooltip effect="dark" :content="isExpenseLimitTooltip" placement="top">
            <el-input-number v-model="form.remindTime" placeholder="请输入" controls-position="right" />
          </el-tooltip>
          <el-select v-model="form.remindUnit" placeholder="请选择">
            <el-option v-for="item in limitOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <span class="tips">发送提醒。</span>
        </div>
        <div class="tips">消费者提交预约时会询问是否允许发送提醒，系统将自动给已允许的消费者发送。</div>
      </el-form-item>

      <el-form-item label="待付款订单取消时间：" prop="cancelOrderTime">
        <div>
          拍下未付款订单
          <el-tooltip effect="dark" content="输入1-60整数" placement="top">
            <el-input-number
              v-model="form.cancelOrderTime"
              placeholder="请输入"
              controls-position="right"
              :min="1"
              :max="60"
            />
          </el-tooltip>
          <span class="tips">分钟内未付款，自动取消订单。</span>
        </div>
      </el-form-item>

      <el-form-item v-if="form.maxReservationCapacity.length > 0" label="时段最大预约容量：">
        <div class="op">
          <div>
            <el-time-select
              v-model="startTime"
              placeholder="起始时间"
              :picker-options="{
                start: form.maxReservationCapacity[0].time,
                step: '00:30',
                end: form.maxReservationCapacity[
                  form.maxReservationCapacity.length - 1
                ].time,
              }"
            />至
            <el-time-select
              v-model="endTime"
              placeholder="结束时间"
              :picker-options="{
                start: form.maxReservationCapacity[0].time,
                step: '00:30',
                end: form.maxReservationCapacity[
                  form.maxReservationCapacity.length - 1
                ].time,
                minTime: startTime,
              }"
            />
            <span class="tips" style="margin:0 10px">不关联资源时最大接收</span>
            <el-input-number
              v-model="maxReservationCapacityValue"
              style="width: 100px;margin-left: 10px;"
              placeholder="请输入最大容量"
              controls-position="right"
              :min="1"
              :max="9999"
            />
            <span class="tips" style="margin:0 10px">人</span>
            <el-button type="text" size="small" @click="handleEditMaxReservationCapacity">确认</el-button>
            <i style="margin-left:6px" class="el-icon-warning-outline" @mouseover="popup = true,selectImg=2" />
          </div>
        </div>

        <div class="times">
          <div>排班表:</div>
          <div class="times-schedule">
            <div v-for="(itemC, indexC) in form.maxReservationCapacity" :key="indexC" class="times-item">
              <div>{{ itemC.time }}</div>
              <div>
                <el-input-number
                  v-model="itemC.max"
                  size="mini"
                  controls-position="right"
                  :min="minState"
                  :max="99999999"
                  @blur="inputNuBlur(itemC.max)"
                />
              </div>
            </div>
          </div>
        </div>

        <!--        <div-->
        <!--          v-for="(item, index) in form.maxReservationCapacity"-->
        <!--          :key="index"-->
        <!--          style="margin-top: 10px"-->
        <!--        >-->
        <!--                    <el-time-picker-->
        <!--                      v-model="item.customParamsOpenTime"-->
        <!--                      is-range-->
        <!--                      value-format="HH:mm"-->
        <!--                      format="HH:mm"-->
        <!--                      range-separator="至"-->
        <!--                      start-placeholder="开始时间"-->
        <!--                      end-placeholder="结束时间"-->
        <!--                      placeholder="选择时间范围"-->
        <!--                      @change="-->
        <!--                        onChangeCustomParamsOpenTime(index, item.customParamsOpenTime)-->
        <!--                      "-->
        <!--                    />-->
        <!--        </div>-->
      </el-form-item>
    </el-form>
    <Pop :popup.sync="popup" :select-img="selectImg" />
  </div>
</template>

<script>
import { updateStore } from '@/views/wxaMallModule/api/shop'
import {
  form_rules,
  LIMIT_STATE,
  limitOptions,
  resolveDoubleTime
} from '../config'
import Pop from './modules/pop.vue'
export default {
  name: 'AppointmentSettings',
  components: { Pop },
  data() {
    return {
      rules: form_rules,
      limitOptions,
      startTime: '',
      endTime: '',
      maxReservationCapacityValue: 1,
      // 校验规则
      form: {
        appointmentItem: '项目',
        personnelItem: '资源',
        shopId: 0,
        isChangeTime: false,
        isStartLimit: false,
        isCancelLimit: false,
        modificationTimes: 0,
        initiateReservationRestrictions: undefined,
        cancelReservationRestrictions: undefined,
        remindTime: 0,
        cancelOrderTime: 15,
        reservationScope: '',
        initiateReservationUnit: limitOptions[0].value,
        cancelReservationUnit: limitOptions[0].value,
        remindUnit: limitOptions[0].value,
        maxReservationCapacity: [],
        allowModifyTime: false
      },
      minState: 1,
      popup: false,
      selectImg: 0,
      initiatorMax: 21600,
      cancelMax: 21600
    }
  },
  computed: {
    isStartLimitTooltip() {
      const initiateReservationUnit = this.form.initiateReservationUnit
      /* eslint-disable */ 
      initiateReservationUnit === LIMIT_STATE.HH && (this.initiatorMax = 360)
      initiateReservationUnit === LIMIT_STATE.MM && (this.initiatorMax = 21600)
      initiateReservationUnit === LIMIT_STATE.D && (this.initiatorMax = 15)
      return initiateReservationUnit === LIMIT_STATE.HH
        ? '请输入输入1-360整数'
        : initiateReservationUnit === LIMIT_STATE.MM
          ? '请输入1-21600整数'
          : '请输入1-15整数'
    },
    isCancelLimitTooltip() {
      const initiateReservationUnit = this.form.cancelReservationUnit
      initiateReservationUnit === LIMIT_STATE.HH && (this.cancelMax = 360)
      initiateReservationUnit === LIMIT_STATE.MM && (this.cancelMax = 21600)
      initiateReservationUnit === LIMIT_STATE.D && (this.cancelMax = 15)
      return initiateReservationUnit === LIMIT_STATE.HH
        ? '请输入输入1-360整数'
        : initiateReservationUnit === LIMIT_STATE.MM
          ? '请输入1-21600整数'
          : '请输入1-15整数'
    },
    isExpenseLimitTooltip() {
      const initiateReservationUnit = this.form.remindUnit
      return initiateReservationUnit === LIMIT_STATE.HH
        ? '请输入输入1-72整数'
        : initiateReservationUnit === LIMIT_STATE.MM
          ? '请输入输入1-4320整数'
          : '请输入1-3整数'
    }
  },
  watch: {
    'form.isChangeTime'(v) {
      this.form.modificationTimes = 0
      this.form.allowModifyTime = v
    },
    'form.modificationTimes'(v) {
      v && (this.form.allowModifyTime = true)
    },
    'form.isStartLimit': {
      handler(v) {
        if (!v) {
          this.$set(this.form, 'initiateReservationRestrictions', undefined)
          this.$set(this.form, 'initiateReservationUnit', undefined)
        } else {
          !this.form.initiateReservationUnit && this.$set(this.form, 'initiateReservationUnit', this.limitOptions[0].value)
          !this.form.initiateReservationRestrictions && this.$set(this.form, 'initiateReservationRestrictions', 1)
        }
      },
      deep: true
    },
    'form.isCancelLimit': {
      handler(v) {
        if (!v) {
          this.$set(this.form, 'cancelReservationRestrictions', undefined)
          this.$set(this.form, 'cancelReservationUnit', undefined)
        } else {
          !this.form.cancelReservationUnit && this.$set(this.form, 'cancelReservationUnit', this.limitOptions[0].value)
          !this.form.cancelReservationRestrictions && this.$set(this.form, 'cancelReservationRestrictions', 1)
        }
      },
      deep: true
    }
  },
  mounted() {
    this.$bus.on('operatingState', e => { this.minState = e.operatingState ? 1 : 0 })
  },
  beforeDestroy() {
    this.$bus.off('operatingState', e => {})
  },
  methods: {
    // 批量修改时间段容量
    handleEditMaxReservationCapacity() {
      if (this.maxReservationCapacityValue > 9999) {
        return this.$message.warning('最大预约容量不能超过9999')
      }
      if (!this.startTime || !this.endTime) return
      // 确定有多个半小时
      this.form.maxReservationCapacity = resolveDoubleTime(
        this.form.maxReservationCapacity,
        this.startTime,
        this.endTime,
        this.maxReservationCapacityValue
      )
      // this.form.maxReservationCapacity.push({
      //   customParamsOpenTime: ['', ''],
      //   beginTime: '',
      //   endTime: '',
      //   max: 0
      // })
    },
    // 保存表单
    submit() {
      this.$refs.form.validate(valid => {
        const params = Object.assign({}, this.form)
        if (valid) {
          updateStore(params)
            .then(res => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
            })
            .catch(() => { })
        }
      })
    },

    // 重置表单
    reset() {
      if (this.activeStore.storeId) {
        this.getDetail(this.activeStore.storeId)
      }
    },
    getQuery() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          const params = Object.assign({}, this.form)
          console.log('params', params)
          for (let index = 0; index < params.description.length; index++) {
            const element = params.description[index]
            for (let idx = 0; idx < element.length; idx++) {
              const item = element[idx]
              if (!item) return this.$message.error('店铺概况不能为空')
            }
          }
          valid ? resolve(params) : reject(false)
        })
      })
    },
    setQuery(data) {
      this.form = { ...data }
      if (this.form.cancelReservationRestrictions || this.form.cancelReservationUnit) {
        this.form.isCancelLimit = true
      }
      if (this.form.initiateReservationRestrictions || this.form.initiateReservationUnit) {
        this.form.isStartLimit = true
      }
    },
    clearValidate() {
      this.$refs.form.clearValidate()
    },
    inputNuBlur(e) {
      this.minState && (e < 1 || e > 99999999) && (this.$message.error('请输入整数。最小为1，最大为9999,9999则为无限'))
      !this.minState && (e < 0 || e > 99999999) && (this.$message.error('请输入整数。最小为0，最大为9999,9999则为无限'))
    }
  }
}
</script>

<style scoped lang="scss">
.el-input {
  width: 200px;
}

/deep/.el-select {
  width: 100px;
}

.tips {
  color: #9e9e9e;
  font-size: 0.85rem;
}

.el-form-item {
  margin-top: 20px;
}

.additional {
  display: flex;
  align-items: center;

  .el-input {
    width: 220px;
    margin-left: 20px;
  }
}

h1 {
  font-size: 1.125rem;
  font-weight: bold;
}

.times {
  margin-top: 10px;

  &-schedule {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid whitesmoke;
    padding: 20px;
  }

  &-item {
    width: 180px;
    text-align: center;
    border: 1px solid whitesmoke;
    padding: 20px;
    margin: 5px;
    border-radius: 8px;
  }
}

</style>
